<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <script src="../../js/load.js"></script>
</head>

<body>
<div class="layui-fluid">
    <div class="flexrow">
        <div class="layui-panel list-container">
            <div class="list-search-container">
                <button class="layui-btn layui-btn-sm" onclick="HandleAdd()"><i class="layui-icon layui-icon-add-1 layui-font-12"></i>新增规则</button>
                <div class="list-search-item">
                    <span style="width:100px">规则名称：</span>
                    <input id="ruleName" autocomplete="off" class="layui-input">
                </div>
                <button class="layui-btn layui-btn-sm" style="margin-left:5px" onclick="BindTableData()"><i class="layui-icon layui-icon-search layui-font-12"></i>搜索</button>
            </div>
            <table class="layui-table" lay-data="{id: 'datagrid',height:'full',limit:15}" lay-filter="datagrid">
                <thead>
                <tr>
                    <th lay-data="{field:'ruleName'}">规则名称</th>
                    <th lay-data="{field:'ruleProtocol',width:100,align:'center'}">协议</th>
                    <th lay-data="{field:'rulePort',width:100,align:'center'}">端口</th>
                    <th lay-data="{fixed: 'right', width:100, align:'center', toolbar: '#action'}">策略</th>
                    <th lay-data="{fixed: 'right', width:100, align:'center', toolbar: '#op'}">操作</th>
                </tr>
                </thead>
            </table>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/html" id="action">
    {{#  if(d.ruleAction=='allow'){ }}
        <span style="color:green">允许</span>
    {{#  } else { }}
        <span style="color:red">拒绝</span>
    {{#  } }}
</script>
<script type="text/html" id="op">
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="HandleDelete"><i
            class="layui-icon layui-icon-delete layui-font-12"></i>删除
    </button>
</script>
<script>
    $(function () {
        BindTableData();
    })

    function BindTableData() {
        var param = {
            ruleName: $("#ruleName").val()
        }
        BindTable("datagrid", "api/firewall/list", param, null, true);
    }


    function HandleAdd() {
        OpenDialog('新增规则', 'pages/firewall/firewall_add.html', 600, 500, function () {
            BindTableData();
        })
    }


    function HandleDelete(RowData) {
        OpenConfirm('确认删除？', function () {
            var param = {
                ruleID: RowData.ruleID
            }
            var loading = layer.load('处理中...', {
                icon: 16,
                shade: 0.01
            })
            HttpPost(JSON.stringify(param), 'api/firewall/delete', function (result) {
                layer.close(loading);
                if (result.code == 0) {
                    OpenSuccessMessage("删除成功")
                    BindTableData();
                } else {
                    OpenFail("删除失败");
                }
            })
        })
    }
</script>